import React from 'react'
import {Row, Col, Layout, Menu, Icon} from 'antd'
import MyHeader from './components/Header'
import Footer from './components/Footer'
import NavLeft from './components/NavLeft'
import {fetch} from './my_axios/api'
import './style/components.less'//全局样式
import {setNavLeft, setWindowHeight} from './redux/action/index'
import {connect} from 'react-redux'
import createHistory from 'history/createHashHistory'
const history = createHistory();
class Admin extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            isMobile: false,
            isNarrow: false,
            collapsed: false,
        }
    }
    componentWillMount() {
        // this.verifyToken();
        this.onWindowResize();
        window.addEventListener('resize', this.onWindowResize)//监听器
    }
    /**
     * 验证token
     */
    verifyToken(){
        fetch('user/current').then(res => {
            if (res.status === 'success') {

            } else {
                if(res.data.code===200){
                    history.push('/login')
                }
            }
        }).catch(err => {
            console.log(err);
        });
    }

    onWindowResize = () => {
        const {dispatch}=this.props;
        dispatch(setWindowHeight(window.innerHeight));
        if(window.innerWidth <= 768){
            dispatch(setNavLeft('isMobile'));
        }else if(window.innerWidth <= 989){
            dispatch(setNavLeft('isNarrow'));
        }else{
            dispatch(setNavLeft('default'));
        }
    };
    componentWillUnmount() {//移除监听器
        window.removeEventListener('resize', this.onWindowResize);
    }

    updateOpen = () => {//改变open
        this.setState({
            open: !this.state.open
        })
    };
    getNavLeft=()=>{
        if(this.props.navLeft==='default'){
            return(
                <div className="nav-left">
                    <NavLeft
                        open={this.state.open}
                        updateOpen={this.updateOpen}
                    />
                </div>
            )
        }else if(this.props.navLeft==='isNarrow'){
            return(
                <div className="nav-left-a">
                    <NavLeft
                        open={this.state.open}
                        updateOpen={this.updateOpen}
                    />
                </div>
            )
        }else if(this.props.navLeft==='isMobile'){
            return(
                <div className="nav-left-b">
                    <NavLeft
                        open={this.state.open}
                        updateOpen={this.updateOpen}
                    />
                </div>
            )
        }
    };
    render() {
        return (
            <Row className="container">
                {this.getNavLeft()}
                <div className="main">
                    <div className="header">
                        <MyHeader></MyHeader>
                    </div>
                    <Row className="content">
                        {/*表示此组件的所有子节点*/}
                        {this.props.children}
                    </Row>
                </div>
            </Row>
        )
    }
}
const mapStateToProps= (state)=>{
    return{
        navLeft:state.navLeft,
    }
};
export default connect(mapStateToProps)(Admin)
